<template>
  <div class="guide ">
      <van-swipe v-if="false" class="my-swipe" :autoplay="3000" indicator-color="white" :loop="true">
        <van-swipe-item
          v-for="(l,i) in imglist"
          :key="i"
        >
          <img :src="l" class="g-img" alt="" >
          <van-button  @click="gotowhere('main')" class="gobtn" v-shuibowen  round   size="large" type="primary" v-if="i==imglist.length-1">开启购票</van-button>
        </van-swipe-item>
      </van-swipe>

      <van-swipe v-if="false" class="my-swipe" :autoplay="3000" indicator-color="white" :loop="true">
        <van-swipe-item
          v-for="(l,i) in banner"
          :key="i"
        >
          <img :src="l.pic" class="g-img" alt="" >
          <van-button  @click="gotowhere('main')" class="gobtn" v-shuibowen  round   size="large" type="primary" v-if="i==imglist.length-1">开启购票</van-button>
        </van-swipe-item>
      </van-swipe>

      <my-swipe class="my-swipe" id="mybanner" :options="options">
          <my-swipe-item 
            v-for="(l,i) in banner"
            :key="i"
          >
             <img :src="l.pic" class="g-img" alt="" >
             <van-button  @click="gotowhere('main')" class="gobtn" v-shuibowen  round   size="large" type="primary" v-if="i==imglist.length-1">开启购票</van-button>
          </my-swipe-item>
      </my-swipe>

      <div class="countdown" @click="gotowhere('main')" >
         剩余 {{count}} S
      </div>
      <!-- <div class="countdown" @click="gotowhere('main')" >
         剩余 <van-count-down :time="time" format="ss"  @finish="gotowhere('main')" /> S
      </div> -->
  </div>
</template>


<script>
var  timer = null;
import {getCookie,setCookie,delCookie} from "@/utils/cookie";
export default {
  name:'guide',
  data(){
    return {
      imglist:[
         require("@/assets/images/img1.jpg"),
         require("@/assets/images/img2.jpg"),
         require("@/assets/images/img3.jpg"),
         require("@/assets/images/img4.jpg"),
      ],
      count:5,
      time:1000 * 5 ,
      banner:[],
      options:{
        loop:true,
        autoplay: {
          delay: 2000,//1秒切换一次
        },
        observer:true,  // 监听轮播
        effect : 'cube',
        cubeEffect: {
          slideShadows: true,
          shadow: true,
          shadowOffset: 100,
          shadowScale: 0.6
        },
      }
    }
  },
  destroyed(){
    clearInterval(timer);
    timer = null;
  },
  created(){
     var visitCount = getCookie("visitCount");
     if(visitCount){
      //  已经进来过
      if(visitCount<3){
        setCookie("visitCount",visitCount*1+1,7);
      }else{
        this.gotowhere("main")
      }
     }else{
      //  第一次进来 
        setCookie("visitCount",1,7);
     }

    // this.$axios.get("http://47.104.209.44:3333/banner",{
    //   params:{
    //     type:2
    //   }
    // })
    // .then(res=>{
    //   console.log(res)
    //   this.$nextTick(()=>{
    //     this.banner = res.data.banners.slice(0,4);
    //   })
    // })
    // this.$ajax.getbanner({
    //    type:2
    // })
    // .then(res=>{
    //   this.$nextTick(()=>{
    //     console.log(res)
    //     this.banner = res.banners.slice(0,4);
    //   })
    // })
    this.getbannerdata();
  },
  methods:{
    async getbannerdata(){
      let res = await  this.$ajax.getbanner({  type:2  });
      this.banner = res.banners.slice(0,4);
    }
  },
  mounted(){
    this.$nextTick(()=>{
       timer = setInterval(()=>{
          if(this.count>0){
            this.count--;
          }else{
            clearInterval(timer);
            timer = null;
            this.gotowhere("main")
          }
       },1000)
    })
  }
}
</script>



<style lang="scss" scoped>
 .guide{
   position: relative;
   padding:0;
   .countdown{
     z-index:1000;
     position:absolute;
     top:10px;
     right:10px;
     padding:3px 14px;
     background: rgba(0, 0, 0, 0.5);
     color:#fff;
     border-radius: 28px;
     border:2px solid #666;
     cursor: pointer;
     display: flex;
     align-items: center;
     ::v-deep .van-count-down{
       color:#fff;
       font-size: 14px;
       margin:0 2px;
     }
   }
   .my-swipe{
     width:100%;
     height:100%;
     position: relative;
     .gobtn{
       position: absolute;
       bottom:100px;
       left:50%;
       transform: translateX(-50%);
       width:60%;
     }
     .g-img{
        width:100%;
        height:100%;
     }
   }  
 }
</style>
